<template>
  <p>App</p>
  <Child v-show="isShow" />
  <button @click="isShow = !isShow">按钮</button>
</template>

<script lang="ts">
import Child from "./Child.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      isShow: true,
    };
  },
  beforeCreate() {
    console.log("app beforeCreate");
  },
  created() {
    console.log("app created");
  },
  beforeMount() {
    console.log("app beforeMount");
  },
  mounted() {
    console.log("app mounted");
  },
  beforeUpdate() {
    console.log("app beforeUpdate");
  },
  updated() {
    console.log("app updated");
  },
  beforeUnmount() {
    console.log("app beforeUnmount");
  },
  unmounted() {
    console.log("app unmounted");
  },
  /*
    1. 初始化
      beforeCreate
      created
    2. 挂载
      beforeMount
      **mounted**
        发送请求、设置定时器、绑定事件等一次性异步任务

        为什么请求在mounted发，而不是created？
          1. mounted中才能操作DOM元素，created不行
          2. mounted不会阻塞渲染，created可能会

    3. 更新
      beforeUpdate
      updated
    4. 卸载
      vue2
        beforeDestroy
        destroyed
      vue3
        **beforeUnmount**
          清除定时器，解绑事件等收尾工作（为了防止内存泄漏）
        unmounted

    一旦组件被keep-alive缓存，就多两个生命周期
      activated 激活
      deactivated 未激活/失效
  */
};
</script>

<style scoped></style>
